<template>
  <div class="container">
    <!-- 顶部导航栏 -->
    <TopBar></TopBar>

    <!-- 消息 -->
    <div class="message-page">
      <!-- 列表部分 -->
      <div class="message-list">
        <div class="list-title">消息</div>
        <ul>
          <li v-for="(message, index) in messageList" :key="index" :class="{ unread: message.unread }" @click="selectMessage(message)">
            <img :src="message.avatarUrl" alt="头像" />
            <div class="message-object">{{ message.senderNameShow }}</div>
            <!--<div class="message-preview">{{ message.preview }}</div>
            <div class="message-time">{{ message.time }}</div>-->
          </li>
          <li style="font-size: 0.729vw; color: rgba(102, 102, 102, 1); height: 1.09375vh; margin-top: 2.29vh; margin-bottom: 2.67vh;">
            没有更多了
          </li>
        </ul>
      </div>

      <!-- 聊天窗口部分 -->
      <div class="chat-window">
        <!-- 顶部信息栏 -->
        <div class="chat-header">
          <div class="box1">
            <div class="selected-name">{{ selectedMessage.senderNameShow }}</div>
            <div class="selected-city">{{ selectedMessage.region }}</div>
          </div>
          <div class="box2">
            <div class="selected-title">{{ selectedMessage.name }}</div>
            <div class="selected-money">{{ selectedMessage.payment }}元/{{ selectedMessage.unit }}</div>
          </div>
          <button @click="exchangeVxNumber" class="vxNumber-btn">
            <img src="../assets/images/vxExchangeImg.png" alt="">
            <span>交换微信</span>
          </button>
          <button @click="initTransaction" class="init-btn">{{ status0 }}</button>
          <button @click="onProfileButtonClick">去评价</button>
        </div>
        <!-- 中间消息 -->
        <div class="chat-messages" ref="chatMessagesContainer">
          <div
              v-for="(chat, index) in chatMessages"
              :key="index"
              :class="['chat-message', chat.senderPhoneNumber === selectedMessage.senderPhoneNumber ? 'receiver' : 'sender']"
          >
            <span v-show="shouldDisplayTime(chat.timeStamp, chatMessages[index - 1]?.timeStamp)" class="chat-time">{{ formatDate(chat.timeStamp) }}</span>
            <img class="chat-avatar"
                 :src="whichAvatar(chat.senderPhoneNumber)"
                 :style="{marginTop: shouldDisplayTime(chat.timeStamp, chatMessages[index - 1]?.timeStamp) ? '6.785vh' : '0.8vh' }"
                 alt="">
            <div class="chat-content-box"
                 :style="{marginTop: shouldDisplayTime(chat.timeStamp, chatMessages[index - 1]?.timeStamp) ? '6.785vh' : '0.8vh' }">
              <div class="chat-content" v-show="chat.messageType !== 'vxExchange'">
                {{ chat.content }}
              </div>
              <div class="exchangeVx-content" v-show="chat.messageType === 'vxExchange'">
                <span>我想要与您交换微信，您是否同意</span>
                <div class="btn-box">
                  <button class="reject-btn" @click="rejectExchange()">拒绝</button>
                  <button class="agree-btn" @click="agreeExchange()">同意</button>
                </div>
              </div>


            </div>



          </div>
        </div>
        <!-- 信息输入框 -->
        <div class="chat-input">
          <img src="../assets/images/messageFile.png" alt="">
          <img src="../assets/images/messagePicture.png" alt="" style="left: 3.925vw;top: 0.98vh;">
          <textarea v-model="newMessage.content"
                    placeholder="请输入消息，按Enter键发送或点击发送按钮发送"
                    @keydown="handleKeydown"></textarea>
          <button @click="sendMessage">发送</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {ref, reactive, onMounted, nextTick, computed, watchEffect, watch} from "vue";
import { useRouter } from "vue-router";
import TopBar from "@/components/TopBar.vue";
import {useStore} from "vuex";
import {useGetContactList} from "@/api/getContactList";
import {useGetChatMessages} from "@/api/getChatMessages";
import {useSendMessage} from "@/api/getSendMessage";
import {initWebSocket} from "@/api/websocket";
import {confirmReceiver} from "@/api/confirmReceiver";

export default {
  name: "MessagePage",
  components: { TopBar },

  setup() {
    const router = useRouter();
    const store = useStore();
    const userInfo = computed(() => store.getters.getUserInfo || {});
    const PersonData = ref({});
    watchEffect(() => {
      if (userInfo.value) {
        PersonData.value = {
          name: userInfo.value?.name || "登录",
          gender: userInfo.value?.gender || null,
          isNameShow: PersonData.value.isNameShow || false,
          avatar: userInfo.value?.avatar || "https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66",
          identity: userInfo.value?.identity || 3,
          city: userInfo.value?.city || "杭州",
          birthdate: userInfo.value?.birthdate || "",
          school: userInfo.value?.school || "",
          graduateYear: userInfo.value?.graduateYear || "",
          vxNumber: userInfo.value?.vxNumber || "",
          intro: userInfo.value?.intro || "",
          resume: userInfo.value?.resume || "",
          resumeName: userInfo.value?.resumeName || "",
          ratio: userInfo.value?.ratio || 0,
          deliverCount: userInfo.value?.deliverCount || 0,
          completedCount: userInfo.value?.completedCount || 0,
          credit: userInfo.value?.credit || 80,
          phoneNumber: userInfo.value?.phoneNumber || "",
          ifOnline: userInfo.value?.ifOnline || 0,
        };
      }
    });
    const contactList = ref([])
    const messageList = ref([]);
    const selectedMessage = reactive({
      senderNameShow: "",
      senderPhoneNumber: "",
      avatarUrl: "",
      region: "",
      name: "",
      payment: 0,
    });
    const { handleGetContactList, isLoading } = useGetContactList(PersonData.value.phoneNumber, contactList);

    /*const contactList = computed(() => store.getters.getContactList || []);*/
    watchEffect(() => {
      messageList.value = contactList.value.map((record) => ({
        avatarUrl: record.contactInfo?.toWhoAvatarUrl || "",
        senderNameShow: record.contactInfo?.toWhoNameShow || "",
        senderPhoneNumber: record.contactInfo?.toWhoPhoneNumber || "",
        vxNumber: record.contactInfo?.toWhovxNumber || "",
        id: record.taskInfo?.id || "",
        isGroup: record.taskInfo?.isGroup || false,
        name: record.taskInfo?.name || "",
        payment: record.taskInfo?.payment || 0,
        region: record.taskInfo?.region || "",
        status: record.taskInfo?.status || 0,
        unit: record.taskInfo?.unit || "",
      }));
      if (messageList.value.length > 0) {
        selectedMessage.senderNameShow = messageList.value[0]?.senderNameShow || "通知消息";
        selectedMessage.senderPhoneNumber = messageList.value[0]?.senderPhoneNumber || "通知消息";
        selectedMessage.avatarUrl = messageList.value[0]?.avatarUrl || "";
        selectedMessage.vxNumber = messageList.value[0]?.vxNumber || "";
        selectedMessage.region = messageList.value[0]?.region || "";
        selectedMessage.name = messageList.value[0]?.name || "";
        selectedMessage.payment = messageList.value[0]?.payment || 0;
        selectedMessage.unit = messageList.value[0]?.unit || '';
        selectedMessage.id = messageList.value[0]?.id || 0;
        selectedMessage.status = messageList.value[0]?.status || 0;
        /*handleGetChatMessages(PersonData.value.phoneNumber, selectedMessage.senderPhoneNumber);*/
      }
    });

    const chatMessages = ref(null);
    const chatMessagesContainer = ref(true);  // 引用聊天记录容器
    const { handleGetChatMessages, isLoading0 } = useGetChatMessages(chatMessages);
    const { handleSendMessage, isLoading2 } = useSendMessage();
    /*const getChatMessages = computed(() => store.getters.getChatMessages || []);*/
    /*watchEffect(() => {
      chatMessages.value = getChatMessages.value.map((record) => ({
        id: record?.id || 0,
        senderPhoneNumber: record?.senderPhoneNumber || "",
        receiverPhoneNumber: record?.receiverPhoneNumber || "",
        content: record?.content || "",
        timeStamp: record?.timeStamp || "",
        messageType: record?.messageType || "",
        isRead : record?.isRead || 0,
        conversationId: record?.conversationId || "",
      }));
    });*/


    const phoneNumber2 = ref(selectedMessage.senderPhoneNumber)

    // 选择某条消息，更新聊天框
    const selectMessage = async (message) => {
      selectedMessage.senderNameShow = message.senderNameShow;
      selectedMessage.senderPhoneNumber = message.senderPhoneNumber;
      selectedMessage.avatarUrl = message.avatarUrl;
      selectedMessage.region = message.region;
      selectedMessage.name = message.name;
      selectedMessage.payment = message.payment;
      selectedMessage.unit = message.unit;
      selectedMessage.id = message.id;
      selectedMessage.status = message.status;
      phoneNumber2.value = message.senderPhoneNumber;
      await handleGetChatMessages(PersonData.value.phoneNumber, phoneNumber2.value);
    };

    onMounted(async () => {
      await handleGetContactList();
      if (selectedMessage.senderPhoneNumber) {
        await handleGetChatMessages(PersonData.value.phoneNumber, selectedMessage.senderPhoneNumber);
      }
    });

    const whichAvatar = (phoneNumber) => {
      if (phoneNumber === selectedMessage.senderPhoneNumber){
        return selectedMessage.avatarUrl;
      }
      else return PersonData.value.avatar;
    }

    // 输入的新消息
    const newMessage = ref({
      receiverPhoneNumber: "",
      content:"",
      timeStamp: "",
      messageType: "normal",
    });

    // 发送消息的方法
    const sendMessage = async() => {
      newMessage.value.receiverPhoneNumber = selectedMessage.senderPhoneNumber;
      newMessage.value.timeStamp = sendFormatDate(new Date());
      newMessage.value.messageType = "normal";
      await handleSendMessage(newMessage.value);
      await handleGetChatMessages(PersonData.value.phoneNumber, selectedMessage.senderPhoneNumber);
      /*await handleGetContactList();*/
    };
    // 发送消息的时间
    const sendFormatDate = (date) => {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
    };
    const formatDate = (dateString) => {
      if (dateString === null) {
        return "";
      }
      const date = new Date(dateString); // 转换为 Date 对象
      const now = new Date();
      const year = date.getFullYear(); // 获取年份
      const month = String(date.getMonth() + 1).padStart(2, '0'); // 获取月份
      const day = String(date.getDate()).padStart(2, '0'); // 获取日期
      const hours = String(date.getHours()).padStart(2, '0'); // 获取小时
      const minutes = String(date.getMinutes()).padStart(2, '0'); // 获取分钟
      // 获取今天的日期
      const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
      const yesterday = new Date(today);
      yesterday.setDate(today.getDate() - 1); // 昨天
      // 判断时间是否为今天、昨天或者其他日期
      if (date >= today) {
        // 今天
        return `${hours}:${minutes}`;
      } else if (date >= yesterday) {
        // 昨天
        return `昨天 ${hours}:${minutes}`;
      } else if (year === now.getFullYear()) {
        // 今年的其他日期
        return `${month}月${day}日 ${hours}:${minutes}`;
      } else {
        // 去年或更早
        return `${year}年${month}月${day}日 ${hours}:${minutes}`;
      }
    };
    const shouldDisplayTime = (currentTime, previousTime) => {
      if (!previousTime) return true; // 如果是第一条消息，肯定显示时间

      const currentDate = new Date(currentTime);
      const previousDate = new Date(previousTime);

      // 计算时间差，单位为秒
      const timeDifference = (currentDate - previousDate) / 1000;

      // 如果时间差小于等于 30 秒，不显示时间，返回 false
      return timeDifference > 60;
    };
    const phoneNumber = store.state.userInfo.phoneNumber;
    onMounted(() => {
      initWebSocket(phoneNumber,(messageData) => {
        chatMessages.value.push(messageData); // 收到消息后将其添加到 chatMessages
      }, chatMessagesContainer, handleGetContactList);
    });

   /* // 默认显示底部最新消息
    watchEffect(() => {
      if (chatMessages.value) {
        // 等待聊天记录加载完成后滚动到底部
        nextTick(() => {
          // 滚动到聊天消息容器的底部
          chatMessagesContainer.value.scrollTop = chatMessagesContainer.value.scrollHeight;
        });
      }
    });*/
    // 默认显示底部最新消息（每次聊天记录更新时都滚动到底部）
    watchEffect(() => {
      if (chatMessages.value) {
        // 等待 DOM 更新完成后滚动到底部
        nextTick(() => {
          if (chatMessagesContainer.value) {
            chatMessagesContainer.value.scrollTop = chatMessagesContainer.value.scrollHeight;
          }
        });
      }
    });
   /* watch(chatMessages, () => {
      // 使用 nextTick 确保 DOM 更新完成后执行滚动
      nextTick(() => {
        if (chatMessagesContainer.value) {
          chatMessagesContainer.value.scrollTop = chatMessagesContainer.value.scrollHeight;
        }
      });
    });*/

    // shift+enter换行
    const handleKeydown = (event) => {
      if (event.key === 'Enter') {
        if (!event.shiftKey) {
          // 只按 Enter，发送消息
          event.preventDefault();  // 阻止换行
          sendMessage();
        }
      }
    };

    // 处理去评价按钮点击事件
    const onProfileButtonClick = () => {
      router.push({ name: "EvaluationPage" });
    };

    const { handleConfirmReceiver, isLoading3 } = confirmReceiver();
    const status0 = ref('发起交易')
    const initTransaction = () => {
      console.log('initTransaction');
      console.log(selectedMessage.id);
      console.log(selectedMessage.senderPhoneNumber);
      handleConfirmReceiver(selectedMessage.senderPhoneNumber, selectedMessage.id, selectedMessage.status);
      if (selectedMessage.status === 0){
        status0.value = '发起交易';
      }
      else if (selectedMessage.status === 1)
      {
        status0.value = '完成交易';
      }
      else {
        status0.value = '已完成';
      }
    }
    watch(selectedMessage.status,() =>{
      if (selectedMessage.status === 0){
        status0.value = '发起交易';
      }
      else if (selectedMessage.status === 1)
      {
        status0.value = '完成交易';
      }
      else {
        status0.value = '已完成';
      }
    })
    const exchangeVxNumber = async () => {
      newMessage.value.receiverPhoneNumber = selectedMessage.senderPhoneNumber;
      newMessage.value.timeStamp = sendFormatDate(new Date());
      newMessage.value.messageType = "vxExchange";
      newMessage.value.content = "发起交换微信";
      await handleSendMessage(newMessage.value);
      await handleGetChatMessages(PersonData.value.phoneNumber, selectedMessage.senderPhoneNumber);
    }
    const agreeExchange = async () => {
      newMessage.value.receiverPhoneNumber = selectedMessage.senderPhoneNumber;
      newMessage.value.timeStamp = sendFormatDate(new Date());
      newMessage.value.messageType = "vxExchangeAgree";
      newMessage.value.content = PersonData.value.vxNumber;
      if(newMessage.value.content !== ''){
        await handleSendMessage(newMessage.value);
        await handleGetChatMessages(PersonData.value.phoneNumber, selectedMessage.senderPhoneNumber);
      }
    }
    const rejectExchange = async () => {
      newMessage.value.receiverPhoneNumber = selectedMessage.senderPhoneNumber;
      newMessage.value.timeStamp = sendFormatDate(new Date());
      newMessage.value.messageType = "vxExchangeRefuse";
      newMessage.value.content = "不好意思，我拒绝交换微信";
      if(newMessage.value.content !== ''){
        await handleSendMessage(newMessage.value);
        await handleGetChatMessages(PersonData.value.phoneNumber, selectedMessage.senderPhoneNumber);
      }
    }




    return {
      contactList,
      messageList,
      selectedMessage,
      newMessage,
      sendMessage,
      onProfileButtonClick,
      selectMessage,
      chatMessages,
      handleGetContactList,
      isLoading,
      isLoading0,
      handleGetChatMessages,
      phoneNumber2,
      whichAvatar,
      isLoading2,
      handleSendMessage,
      formatDate,
      shouldDisplayTime,
      chatMessagesContainer,
      sendFormatDate,
      handleKeydown,
      initTransaction,
      exchangeVxNumber,
      rejectExchange,
      agreeExchange,
      phoneNumber,
      isLoading3,
      handleConfirmReceiver,
      status0

    };
  },
};
</script>





<style scoped>
.container{
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  overflow-x: hidden;
  background: radial-gradient(66.2% 66.2% at 50% 57.96296296296296%, rgba(235, 245, 255, 0) 0%, rgba(156, 205, 255, 0.48) 100%);
}
.message-page {
  position: absolute;
  left: 10.9375vw;
  top: 11.574vh;
  width: 78.125vw;
  height: 83.33vh;
  border-radius: 0.833vw;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 0 0.521vw  rgba(51, 51, 51, 0.15);
  overflow: hidden;
}

.message-list {
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  width: 25.2vw;
  background: rgba(255, 255, 255, 1);
  border-radius: 0.833vw 0 0 0.833vw;
  overflow: hidden;
}
.list-title{
  position: absolute;
  left: 1.71875vw;
  top: 2.22vh;
  font-size: 1.0417vw;
  font-weight: 500;
  color: rgba(32, 32, 32, 1);
}
.message-list ul {
  position: absolute;
  list-style: none;
  margin: 0;
  padding: 0;
  left: 0;
  top: 7.315vh;
  width: 100%;
  height: 76.015vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}
.message-list ul::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}
.message-list li {
  position: relative;
  cursor: pointer;
  left: 0;
  margin: 0;
  list-style: none;
  width: 100%;
  height: 8.89vh;
  background: rgba(255, 255, 255, 1);
  flex-shrink: 0;
}
/*头像*/
.message-list img {
  position: absolute;
  left: 1.667vw;
  top: 1.65vh;
  width: 2.6vw;
  height: 2.6vw;
  border-radius: 50%;
}
.message-list .message-object{
  position: absolute;
  left: 5.5vw;
  top: 1.65vh;
  font-size: 0.9375vw;
  color: rgba(32, 32, 32, 1);
}

/*.message-list li.unread {
  font-weight: bold;
}*/

.message-list .message-preview{
  position: absolute;
  left: 5.5vw;
  bottom: 1.65vh;
  font-size: 0.729vw;
  color: rgba(102, 102, 102, 1);
}
.message-list .message-time{
  position: absolute;
  right: 1.667vw;
  top: 1.65vh;
  font-size: 0.729vw;
  color: rgba(102, 102, 102, 1);
}

.chat-window {
  position: absolute;
  top: 0;
  right: 0;
  width: 52.925vw;
  height: 100%;
  background: #FAFAFA;;
}
.chat-header {
  position: absolute;
  width: 100%;
  /*height: 10.55vh;*/
  height: 12.67%;
  top: 0;
  border-bottom: 0.00521vw solid rgba(217, 217, 217, 1);
  box-sizing: border-box;
}
.chat-header .box1{
  position: absolute;
  left: 1.67vw;
  top: 2.22vh;
  height: 2.5vh;
  display: flex;
  align-items: center;
}
.chat-header .selected-name{
  position: relative;
  font-size: 0.9375vw;
  color: rgba(32, 32, 32, 1);
  white-space: nowrap;
}
.chat-header .selected-city{
  position: relative;
  margin-left: 1.25vw;
  font-size: 0.729vw;
  color: rgba(102, 102, 102, 1);
  white-space: nowrap;
}
.chat-header .box2{
  position: absolute;
  left: 1.67vw;
  bottom: 1.85vh;
  height: 2.5vh;
  display: flex;
  align-items: center;
}
.chat-header .selected-title{
  position: relative;
  font-size: 0.9375vw;
  color: rgba(32, 32, 32, 1);
}
.chat-header .selected-money{
  position: relative;
  margin-left: 1.25vw;
  font-size: 0.9375vw;
  color: rgba(238, 113, 62, 1);
}
.chat-header button{
  position: absolute;
  right: 1.67vw;
  bottom: 1.85vh;
  width: 6.25vw;
  height: 3.704vh;
  border-radius: 5.21vw;
  background: linear-gradient(221.64deg, #EE713E 0%, #FF8C1A 100%);
  border: none;
  color: rgba(255, 255, 255, 1);
  font-size: 0.833vw;
  line-height: 3.704vh;
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-header .vxNumber-btn{
  right: 16.67vw;
  width: 6.77vw;
  border-radius: 5.21vw;
  border: 0.078125vw solid rgba(13, 127, 233, 1);
  background: rgba(250, 250, 250, 1);
  color: rgba(13, 127, 233, 1);
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: left;
}
.vxNumber-btn img{
  position: relative;
  width: 1.2vw;
  margin-left: 0.385vw;
  margin-right: 0.13vw;
}
.vxNumber-btn span{
  position: relative;
}
.chat-header .init-btn{
  right: 9.167vw;
  background: linear-gradient(90deg, rgba(14, 127, 232, 1) 0%, rgba(16, 112, 222, 1) 100%);
}

.chat-messages {
  position: absolute;
  width: 100%;
  height: 65.44%;
  top: 12.67%;
  border-bottom: 0.00521vw solid rgba(217, 217, 217, 1);
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}
.chat-messages::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}
/* 单条消息容器 */
.chat-message {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1.5vh;
  position: relative;
}
/* 消息时间 */
.chat-time {
  position: absolute;
  top: 1.8vh;
  font-size: 0.833vw;
  color: rgba(153, 153, 153, 1);
  width: 100%;
  text-align: center;
}
/* 用户头像 */
.chat-avatar {
  margin-top: 6.785vh;
  margin-left: 1.667vw;
  width: 2.5vw;
  height: 2.5vw;
  border-radius: 50%;
}
.sender .chat-avatar{
  margin-left: 0;
  margin-right: 1.667vw;
}
/* 消息内容容器 */
.chat-content-box {
  display: flex;
  flex-direction: column;
  max-width: 20.57vw;
  margin-top: 6.785vh;
  margin-left: 0.625vw;
  background-color: #FAFAFA;
}
.sender .chat-content-box{
  margin-right: 0.625vw;
  align-items: flex-end;
}
/* 单条消息内容 */
.chat-content {
  max-width: 20.57vw;
  width: fit-content;
  padding: 1.32vh 1.042vw;
  border-radius: 0.8vw;
  background-color: #FFFFFF;
  font-size: 0.833vw;
  line-height: 2.5vh;
  color: #202020;
  text-align: left;
  /* 自动换行 */
  word-wrap: break-word; /* 遇到长单词或长文本时换行 */
  word-break: break-word; /* 防止溢出 */
  overflow-wrap: break-word; /* 避免内容溢出容器 */
  white-space: pre-wrap;
}
.exchangeVx-content{
  width: 14.6vw;
  height: 11.5vh;
  border-radius: 0.833vw;
  background: rgba(255, 255, 255, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.exchangeVx-content span{
  margin-top: 0.785vw;
  font-size: 0.833vw;
  color: rgba(0, 0, 0, 1);
}
.exchangeVx-content .btn-box{
  width: 100%;
  height: fit-content;
  margin-top: 0.825vw;
  display: flex;
  flex-direction: row;
  gap: 0 2.08vw;
  justify-content: center;
}
.exchangeVx-content .reject-btn{
  width: 5.208vw;
  height: 3.33vh;
  border-radius: 0.417vw;
  border: 1px solid rgba(13, 127, 233, 1);
  font-size: 0.833vw;
  color: rgba(13, 127, 233, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 1);
  cursor: pointer;
}
.exchangeVx-content .agree-btn{
  width: 5.208vw;
  height: 3.33vh;
  border-radius: 0.417vw;
  border: 1px solid rgba(13, 127, 233, 1);
  font-size: 0.833vw;
  color: rgba(255, 255, 255, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, rgba(14, 127, 232, 1) 0%, rgba(0, 95, 204, 1) 100%);
  cursor: pointer;
}
.sender .chat-content{
  background-color: #E6F3FF;
}
/* 接收方消息（左侧对齐） */
.receiver {
  flex-direction: row;
  height: fit-content;
}
/* 发送方消息（右侧对齐） */
.sender {
  flex-direction: row-reverse;
  height: fit-content;
}


.chat-input {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 21.89%;
}
.chat-input img{
  position: absolute;
  left: 1.667vw;
  top: 0.9vh;
  width: 1.15vw;
}
.chat-input textarea {
  position: absolute;
  left: 1.667vw;
  top: 4.4vh;
  width: 49.28vw;
  height: 8.33vh;
  font-size: 0.833vw;
  line-height: 2.59vh;
  color: #202020;
  border: none;
  box-sizing: border-box;
  padding-top: 0;
  padding-left: 0;
  background-color: #FAFAFA;
  text-align: left;
  vertical-align: top;
  overflow-x: hidden;
  overflow-y: auto;
  resize: none; /* 禁用textarea的大小调整 */
}
.chat-input textarea::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}
.chat-input button {
  position: absolute;
  border: none;
  right: 1.667vw;
  bottom: 1.7vh;
  width: 6.25vw;
  height: 3.75vh;
  border-radius: 5.2vw;
  background: linear-gradient(90deg, #0E7FE8 0%, #005FCC 100%);
  font-size: 0.833vw;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
}

::placeholder{
  color: rgba(199, 199, 199, 1);
}
textarea:focus{
  outline: none;
}
</style>
